<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 解构赋值
    // ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值

    // 本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。


    // 数组解构  => 对应下标解构
    // var list = [1,2,3];  

    // 完全解构
    // var [a, b, c] = [1, 2, 3];  // 可以从数组中提取值，按照对应位置，对变量赋值。
    // console.log(a, b, c);

    // 不完全解构   即等号左边的模式，只匹配一部分的等号右边的数组
    // var [a, , c] = [1, 2, 3];
    // console.log(a, c);

    // 解构失败:  解构不成功，变量的值就等于undefined
    // var [a, b, c, d] = [1, 2, 3]
    // console.log(a, b, c, d); // 1 2 3 undefined

    // 在解构过程中,可以给变量设置默认值 
    var [a, b, c, d = 0] = [1, 2, 3]    // d = 0
    var [a, b, c, d = 0] = [1, 2, 3, 4] // d = 4
    var [a, b, c, d = 0] = [1, 2, 3, null] // d = null
    var [a, b, c, d = 0] = [1, 2, 3, undefined] // d = 0

    // 等价于
    // d = d === undefined ? 0 : d;

    // console.log(a, b, c, d); // 1 2 3 undefined

    // 数组解构需要注意:
    // 如果等号的右边不是数组(或者严格地说，不是可遍历的结构，(数组 伪数组 字符串以外))，那么将会报错。

    // 报错
    // let [foo] = 1;
    // let [foo] = false;
    // let [foo] = NaN;
    // let [foo] = undefined;
    // let [foo] = null;
    // let [foo] = {};
    // console.log(a);


    // 数组解构配合扩展运算符  => 实现Rest效果(合并剩余参数) 
    // 注意: Rest element must be last element

    var [a, b, ...c] = [1, 4, 7, 2, 5, 8, 3, 6, 9];
    //  a => 1   b => 4  ...c => 7, 2, 5, 8, 3, 6, 9
    console.log(a, b, c);

    // 报错
    // var [a, ...c, b] = [1, 4, 7, 2, 5, 8, 3, 6, 9];
    // console.log();


    // 对复杂的数组结构 进行解构

    var list = [1, [2, 3, [4]], 5];

    // var [a, b, c] = list;  // a => 1   b: [2, 3, [4]]  c:5
    // console.log(a, b, c);

    // var [b1, b2, b3] = b;
    // console.log(b1, b2, b3); // 2  3  [4]

    // var [b3_1] = b3;
    // console.log(b3_1);


    // var [a, [b1, b2, [b3_1]], c] = list;  // a => 1   b: [2, 3, [4]]  c:5
    // console.log(a, b1, b2, b3_1, c);

    var [a, [b, c, [d]], e] = [1, [2, 3, [4]], 5];
    console.log(a, b, c, d, e);

    var [a, [b], e] = [1, [2, 3, [4]], 5];
    console.log(a, b, e);

    // 数组解构 也可以解构字符串
    var [a,b,c] = "hello";
    console.log(a,b,c);







</script>

</html>